<template>
  <van-popup v-model:show="isShow" position="bottom">
    <div class="userInfoEdit">
      <div class="userInfoEdit-navBar">
        <van-nav-bar title="资料修改" left-arrow @click-left="backStep"/>
      </div>
      <div class="userInfoEdit-userInfo">
        <van-cell-group style="marginBottom:10px">
          <van-cell title="头像" size="large">
            <template #extra>
              <van-uploader :after-read="afterRead">
                <div class="userInfoEdit-userInfo-headPic">
                    <div class="uuh-icon">
                      <van-image width="50px" height="50px" round :src="userImgUrl.content" />
                    </div>
                    <div class="uuh-link">
                      <van-icon size="20" name="arrow"/>
                    </div>
                </div>
              </van-uploader>
            </template>
          </van-cell>
        </van-cell-group>
        <van-form @submit="onSubmit">
          <van-cell-group>
            <van-cell title="用户名" is-link :value="userName" @click="isUserNameShow=true"/>
            <van-action-sheet v-model:show="isUserNameShow">
              <div class="userInfoEditInput">
                <van-field name="userName" v-model="userNameValue" rows="3" autosize type="textarea" maxlength="30" show-word-limit />
                <van-button type="primary" @click="userName = userNameValue;isUserNameShow=false">确认</van-button>
              </div>
            </van-action-sheet>
            <van-cell title="个性签名" is-link :value="userDesc" @click="isUserDescShow=true"/>
            <van-action-sheet v-model:show="isUserDescShow">
              <div class="userInfoEditInput">
                <van-field name="userDesc" v-model="userDescValue" rows="3" autosize type="textarea" maxlength="50" show-word-limit />
                <van-button type="primary" @click="userDesc = userDescValue;isUserDescShow=false">确认</van-button>
              </div>
            </van-action-sheet>
          </van-cell-group>
          
          <van-button class="submitButton" native-type="submit" type="primary">保存</van-button>
        </van-form>
      </div>
    </div>
  </van-popup>
</template>
<script>
import { Popup, ActionSheet, Cell, CellGroup, NavBar, Image as VanImage, Icon, Uploader, /* Notify, */ Field, Form, Button, Toast } from "vant";
import { updateUserName, updateUserDesc, updateUserImage, getUserData } from "@/service/user";
import { ref,onMounted } from 'vue';
export default {
  setup(){
    const isUserNameShow = ref(false);
    const isUserDescShow = ref(false);
    const userNameValue = ref('');
    const userDescValue = ref('');
    const userImgUrl = ref('');
    const userName = ref('');
    const userDesc = ref('');
    onMounted(()=>{
      getUserData().then(res=>{
        userImgUrl.value = {
          content:res.userImgUrl
        };
        userName.value = res.userName;
        userDesc.value = res.userDesc;
      })
    })
    const onSubmit = ()=>{
      const p1 = userName.value ? updateUserName(userName.value) : new Promise((resolve)=>{resolve({status:200})})
      const p2 = userDesc.value ? updateUserDesc(userDesc.value) : new Promise((resolve)=>{resolve({status:200})});
      const p3 = userImgUrl.value.file ? updateUserImage(userImgUrl.value) : new Promise((resolve)=>{resolve({status:200})})
      Promise.all([p1,p2,p3]).then(value=>{
        value.filter(item=>item.status != 200).length == 0 ? Toast.success("保存成功") : Toast.fail('保存失败');
      },()=>{
        Toast.fail("保存失败")
      })
    }
    const afterRead = (file)=>{
      userImgUrl.value = file;
    }
    return {
      isUserNameShow,
      isUserDescShow,
      userNameValue,
      userDescValue,
      
      userImgUrl,
      userName,
      userDesc,
      onSubmit,
      afterRead
    }
  },
  props:['isEditShow','userData'],
  computed:{
    isShow(){
      return this.isEditShow
    }
  },
  components:{
    [Popup.name]:Popup,
    [ActionSheet.name]:ActionSheet,
    [Cell.name]:Cell,
    [CellGroup.name]:CellGroup,
    [NavBar.name]:NavBar,
    [VanImage.name]:VanImage,
    [Icon.name]:Icon,
    [Uploader.name]:Uploader,
    [Field.name]:Field,
    [Form.name]:Form,
    [Button.name]:Button
  },

  methods:{
    backStep(){
      this.$emit('setIsEditHide')
    }
  },
  watch:{
    isUserNameShow(val){
      !val ? this.userDescValue = "":null;
    },
    isUserDescShow(val){
      !val ? this.userNameValue = "":null;
    }
  }
}
</script>
<style lang="less">
.userInfoEdit{
  width: 100%;
  height: 100vh;
  background: #EFEFEF;
  .userInfoEdit-userInfo{
    margin-bottom: 15px;
    .van-cell__title{
      display: flex;
      align-items: center;
    }
    .userInfoEdit-userInfo-headPic{
      display: flex;
      align-items: center;
    }
    .userInfoEditInput{
      width: 100%;
      text-align: right;
      button{
        margin:0 10px 10px 0;
      }
      textarea{
        background: rgba(204, 204, 204, 0.479);
        padding: 5px 10px;
        font-size: 16px;
      }
    }
    .submitButton{
      margin: 15px 0;
      width: 90%;
    }
    .van-cell_value{
      word-break: break-all;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>